#header
  height: 0px
  position: relative
  background: color-header-background
  margin-bottom: 50px
  padding: 0px container-padding
  transition: height 0.2s ease-in
  &.open
    height: header-height
  .logo
    float: left
    margin: 33px 30px 0 0
  
#header-outer
  height: 100%
  position: relative

#header-inner
  display: block
  height: 100%
  overflow: hidden

#main-nav
  position: relative
  float: left
  top: 37px

$nav-link
  float: left
  color: color-header
  text-decoration: none
  transition: color 0.2s
  display: block
  padding: 0px 10px
  text-transform: uppercase
  &:hover
    color: color-link

.nav-icon
  @extend $nav-link
  font-family: font-icon
  text-align: center
  font-size: font-size
  width: font-size
  height: font-size
  padding: 5px 7px
  position: relative
  cursor: pointer
  float: left
  top: 37px

.main-nav-link
  @extend $nav-link
  font-family: 'Open Sans', font-yahei
  font-weight: 600
  @media mq-mobile
    display: none

#main-nav-toggle
  display: none
  &:before
    content: "\f0c9"
  @media mq-mobile
    display: block

#sub-nav
  float: right

#nav-rss-link
  &:before
    content: "\f09e"

#nav-github-link
  &:before
    content: "\f113"

#nav-search-btn
  display: none
  &:before
    content: "\f002"

#search-form-wrap
  float: left
  margin: 29px 10px 0 22px
  @media mq-mobile
    width: 100%
    right: -100%

.search-form-input
  appearance: none
  padding: 0 13px
  border: 1px solid color-search-form-input
  height: 38px
  width: search-form-input-width
  font-size: 15px
  font-weight: 400
  background: none
  display: inline-block
  box-shadow: none
  border-radius: 20px
  outline: none
  transition: background 0.2s
  &:focus
    background: white
  &::-webkit-input-placeholder
    color: color-search-form-input
  &:-moz-placeholder
    color: color-search-form-input
  &::-moz-placeholder
    color: color-search-form-input
  &:-ms-input-placeholder
    color: color-search-form-input

.search-form-submit
  display: none